<template>
  <div>
    <el-form ref="goodsSpecSRef" :inline="true" :model="goodsSpecCl.goodsSpecs" class="demo-form-inline">
      <el-form-item label="名称" prop="name">
        <el-input v-model="goodsSpecCl.goodsSpecs.name" type="text" />
      </el-form-item>
      <el-form-item label="详情名称" prop="code">
        <el-input v-model="goodsSpecCl.goodsSpecs.code" type="text" />
      </el-form-item>
      <el-form-item label="类型" prop="typeId">
        <el-cascader v-model="goodsSpecCl.goodsSpecs.typeId" :options="goodsSpecCl.goodsTypes" :props="goodsSpecCl.props" clearable :show-all-levels="false" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="selectGoodsSpec()">搜索</el-button>
        <el-button type="primary" @click="reset(goodsSpecSRef)">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div>
    <el-row :gutter="20">
      <el-col :span="6">
        <el-button type="primary" @click="opendialog()">
          <el-icon>
            <Plus />
          </el-icon>
          添加商品分类
        </el-button>
      </el-col>
    </el-row>
  </div>
  <div>
    <el-table :data="goodsSpecCl.goodsSpecTable" :default-expand-all="false" row-key="id" stripe style="width: 100%">
      <el-table-column label="名称" prop="name" header-align="center" align="center" />
      <el-table-column label="参数" prop="param" header-align="center" align="center" />
      <el-table-column label="创建时间" prop="createTime" header-align="center" align="center" />
      <el-table-column label="介绍" header-align="center" align="center" :show-overflow-tooltip="true">
        <template #default="scope">
          <div v-html="scope.row.describes" />
        </template>
      </el-table-column>
      <el-table-column align="center" fixed="right" header-align="center" label="操作">
        <template #default="scope">
          <el-button link size="small" type="primary" @click="edit(scope.row.id)"> 编辑 </el-button>
          <el-button link size="small" type="primary" @click="addGoodsSpecDetail(scope.row.id)"> 添加详情 </el-button>
          <el-popconfirm title="确定要删除吗?" @confirm="deleted(scope.row.id)">
            <template #reference>
              <el-button link type="primary">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div>
    <el-dialog v-model="goodsSpecCl.goodsSpecDialog" destroy-on-close title="添加部门" @close="resetDialog(addGoodsSpecRef)">
      <el-form ref="addGoodsSpecRef" :model="goodsSpecCl.goodsSpecEdit" :rules="goodsSpecCl.goodsSpecRule">
        <el-form-item label="类型" prop="typeId">
          <el-cascader v-model="goodsSpecCl.goodsSpecEdit.typeId" :options="goodsSpecCl.goodsTypes" :props="goodsSpecCl.props" clearable :show-all-levels="false" />
        </el-form-item>
        <el-form-item label="商品分类名称" prop="name">
          <el-input v-model="goodsSpecCl.goodsSpecEdit.name" placeholder="商品分类名称" type="text" />
        </el-form-item>
        <el-form-item label="商品分类参数" prop="param">
          <el-input v-model="goodsSpecCl.goodsSpecEdit.param" placeholder="商品分类参数" type="text" />
        </el-form-item>
        <el-form-item label="商品小图" prop="imageUrl">
          <ImgUpload v-model:file_url="goodsSpecCl.goodsSpecEdit.imageUrl" :file_max="1" />
        </el-form-item>
        <el-form-item label="介绍" prop="describes">
          <Editor v-model:editorValue="goodsSpecCl.goodsSpecEdit.describes"></Editor>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="editGoodsSpec">保存 </el-button>
          <el-button @click="goodsSpecCl.goodsSpecDialog = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog v-model="goodsSpecCl.goodsSpecDetailDialog" destroy-on-close title="编辑商品分类详情" @close="resetGoodsSpecDetail(addDetailRef)">
      <el-form ref="addDetailRef" :model="goodsSpecCl.goodsSpecEdit" :rules="goodsSpecCl.goodsSpecRule">
        <span v-for="(item, index) in goodsSpecCl.goodsSpecDetails" :key="index">
          <el-row :gutter="10" class="row-bg">
            <el-col :span="10">
              <el-form-item label="商品分类名称">
                <el-input v-model="item.name" placeholder="商品分类名称" />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="商品分类参数">
                <el-input v-model="item.param" placeholder="商品分类参数" />
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-form-item>
                <el-button @click="addGoodsDetails(index)"
                  ><el-icon><Plus /></el-icon
                ></el-button>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-form-item>
                <el-button @click="removeGoodsDetails(index)"
                  ><el-icon><Minus /></el-icon
                ></el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </span>
        <el-form-item>
          <el-button type="primary" @click="editGoodsSpecDetails">保存 </el-button>
          <el-button @click="goodsSpecCl.goodsSpecDetailDialog = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
  <Page :pageData="goodsSpecCl.goodsSpecs" @selectPage="selectGoodsSpec"></Page>
</template>
<script lang="ts" setup>
import { goodsSpecClass } from '@/page/types/sale/goodsSpec'
import { selectType } from '@/api/sale'
import { addGoodsType, addGoodsSpec, updataGoodsSpec, delGoodsSpec, editGoodsSpecDetail, detailGoodsSpec, pageGoodsSpec, goodsSpecDetailList } from '@/api/sale'
import { ElMessage, FormInstance } from 'element-plus/es'
import Editor from '@/components/MyEditor.vue'
import ImgUpload from '@/components/ImgsUpload.vue'
const goodsSpecCl = reactive(new goodsSpecClass())
const goodsSpecSRef = ref()
const addDetailRef = ref()
const addGoodsSpecRef = ref()
const selectGoodsSpec = () => {
  pageGoodsSpec(goodsSpecCl.goodsSpecs).then(res => {
    goodsSpecCl.goodsSpecTable = res.data.records
    goodsSpecCl.goodsSpecs.page = res.data.current
    goodsSpecCl.goodsSpecs.size = res.data.size
    goodsSpecCl.goodsSpecs.total = res.data.total
  })
}
const editGoodsSpec = () => {
  if (goodsSpecCl.goodsSpecEdit.id) {
    updataGoodsSpec(goodsSpecCl.goodsSpecEdit).then(res => {
      selectGoodsSpec()
      ElMessage({
        message: '更新商品分类成功',
        type: 'success'
      })
    })
  } else {
    addGoodsSpec(goodsSpecCl.goodsSpecEdit).then(res => {
      selectGoodsSpec()
      ElMessage({
        message: '添加商品分类成功',
        type: 'success'
      })
    })
  }
  goodsSpecCl.goodsSpecDialog = false
}
const deleted = (id: string) => {
  delGoodsSpec(id).then(res => {
    selectGoodsSpec()
    ElMessage({
      message: '删除商品分类成功',
      type: 'success'
    })
  })
}
const goodsType = () => {
  selectType(null).then(res => {
    goodsSpecCl.goodsTypes = res.data
  })
}
const opendialog = () => {
  goodsSpecCl.goodsSpecDialog = true
  selectGoodsSpec()
}
const edit = (id: string) => {
  detailGoodsSpec(id).then(res => {
    goodsSpecCl.goodsSpecDialog = true
    goodsSpecCl.goodsSpecEdit = res.data
  })
}
const resetDialog = (rest: FormInstance | undefined) => {
  if (!rest) return
  rest.resetFields()
  goodsSpecCl.goodsSpecEdit = {}
}
const addGoodsSpecDetail = (id: string) => {
  goodsSpecCl.goodsSpecDetailDialog = true
  goodsSpecCl.goodsSpecId = id
  goodsSpecDetailList(id).then(res => {
    if (!res.data || res.data.length == 0) return
    goodsSpecCl.goodsSpecDetails = res.data
  })
}
const addGoodsDetails = (val: number) => {
  goodsSpecCl.goodsSpecDetails.push({
    id: '',
    name: '',
    param: ''
  })
}
const removeGoodsDetails = (index: number) => {
  if (index === 0) return
  goodsSpecCl.goodsSpecDetails[index] = null
  goodsSpecCl.goodsSpecDetails = goodsSpecCl.goodsSpecDetails.filter(i => i)
}
const resetGoodsSpecDetail = (rest: FormInstance | undefined) => {
  if (!rest) return
  rest.resetFields()
  goodsSpecCl.goodsSpecDetails = [
    {
      id: '',
      name: '',
      param: ''
    }
  ]
}
const editGoodsSpecDetails = () => {
  const data = goodsSpecCl.goodsSpecDetails.filter(x => x.name !== '' && x.param !== '')
  if (!data || data.length == 0) return
  editGoodsSpecDetail(goodsSpecCl.goodsSpecId, data).then(res => {
    ElMessage({
      message: '编辑商品分类详情成功',
      type: 'success'
    })
  })
  goodsSpecCl.goodsSpecDetailDialog = false
}
onMounted(() => {
  goodsType()
  selectGoodsSpec()
})
</script>
<style lang="scss" scoped>
.el-select {
  width: 200px;
}
</style>
